<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <title>部署管理</title>
    <script type="text/javascript" src="../anon/js/jquery-1.8.3.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            font-size: 14px;
        }
        #menu{
            width: 800px;
            overflow: hidden;
            margin: 100px auto;
            border: 1px solid #BF9660;
        }
        #menu #nav{
            display: block;
            width: 100%;
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #menu #nav li{
            float: left;
            width: 200px;
        }
        #menu #nav li a{
            display: block;
            line-height: 27px;
            text-decoration: none;
            padding: 0 0 0 5px;
            text-align: center;
            color: #333333;
        }
        #menu_con{
            width: auto;
            height: auto;
            border-top: none;
        }
        .tag{
            padding: 10px;
            overflow: hidden;
        }
        .selected{
            background: #CCCCFF;
            color: #FFFFFF;
        }
        button{
            width: 100px;
            height: 30px;
            cursor: pointer;
        }
        input{
            height: 30px;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul id="nav">
            <li><a href="#" class="selected">新建部署</a></li>
            <li><a href="#" class="">部署操作</a></li>
            <li><a href="#" class="">部署详情</a></li>
            <li><a href="#" class="">删除部署</a></li>
        </ul>
        <div id="menu_con">
            <div class="tag" style="display:block">
                <table>
                    <!--tr>
                        <td><h3>部署名称</h3></td>
                    </tr-->
                    <tr>
                        <td>deployName: </td>
                        <td><input id="deployName" type="text"/></td>
                    </tr>
                    <tr>
                        <td>creatorType: </td>
                        <td><select id="creatorType"><option value="USER" selected>个人用户</option><option value="GROUP">用户组</option></select> </td>
                    </tr>
                    <tr>
                        <td>creatorId: </td>
                        <td><input id="creatorId" type="text" value="1"/></td>
                    </tr>
                    <tr>
                        <td>namespace: </td>
                        <td><input id="cluster_namespace" type="text" value="default"/></td>
                    </tr>
                    </tr>
                    <td style="color: #9575cd">image: </td>
                    <td><input id="c_image" type="text" value="centos"/></td>
                    </tr>
                    <tr>
                        <td style="color: #9575cd">tag: </td>
                        <td><input id="c_tag" type="text" value="7"/></td>
                    </tr>
                    <tr>
                        <td style="color: #9575cd">cpu: </td>
                        <td><input id="c_cpu" type="text" value="1"/></td>
                    </tr>
                    <tr>
                        <td style="color: #9575cd">memory: </td>
                        <td><input id="c_mem" type="text" value="100"/></td>
                    </tr>
                    <tr>
                        <td style="color: #9575cd">env key: </td>
                        <td><input id="e_key" type="text" value="JAVA"/></td>
                    </tr>
                    <tr>
                        <td style="color: #9575cd">env value: </td>
                        <td><input id="e_value" type="text" value="/usr/java"/></td>
                    </tr>
                    <tr>
                        <td style="color: #9575cd">env description: </td>
                        <td><input id="e_description" type="text" value="java path"/></td>
                    </tr>
                    <tr>
                    <tr>
                        <td><button id="addEnv">增加环境变量</button></td>
                        <td><button id="delEnv">删除环境变量</button></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <table id="envList"><tbody></tbody></table>
                        </td>
                    <tr>
                        <td><button id="addContainer">增加容器</button></td>
                        <td><button id="delContainer">删除容器</button></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <table id="containerList"><tbody></tbody></table>
                        </td>
                    </tr>
                    <tr>
                        <td>replicas: </td>
                        <td><input id="replicas" type="text" value="2"/></td>
                    </tr>
                    <tr>
                        <td>cluster name: </td>
                        <td><input id="clusterName" type="text" value="cluster"/></td>
                    </tr>
                    <tr>
                        <td>hostEnv: </td>
                        <td><select id="hostEnv"><option value="PROD" selected>生产环境</option><option value="TEST">测试环境</option></select> </td>
                    </tr>
                    <tr>
                        <td style="color: #4062eb">log path: </td>
                        <td><input id="logPath" type="text" value="/opt/log"/></td>
                    </tr>
                    <tr>
                        <td style="color: #4062eb">autoCollect (true or false): </td>
                        <td><input id="autoCollect" type="text" value="true"/></td>
                    </tr>
                    <tr>
                        <td style="color: #4062eb">logTopic: </td>
                        <td><input id="logTopic" type="text" value="test_topic"/></td>
                    </tr>
                    <tr>
                        <td><button id="addLog">增加日志路径</button></td>
                        <td><button id="delLog">删除日志路径</button></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <table id="logList"></table>
                        </td>
                    <tr>
                    <tr>
                        <td style="color: #6ac5b6">label name: </td>
                        <td><input id="l_name" type="text" value="hostname"/></td>
                    </tr>
                    <tr>
                        <td style="color: #6ac5b6">label content: </td>
                        <td><input id="l_content" type="text" value="bx-42-197"/></td>
                    </tr>
                    <tr>
                        <td><button id="addLabel">增加标签</button></td>
                        <td><button id="delLabel">删除标签</button></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <table id="labelList"></table>
                        </td>
                    <tr>
                    <tr>
                        <td>load balance port: </td>
                        <td><input id="l_port" type="text"/></td>
                    </tr>
                    <tr>
                        <td>load balance target port: </td>
                        <td><input id="l_targetPort" type="text"/></td>
                    </tr>
                    <tr>
                        <td>health check type: </td>
                        <td><input id="h_type" type="text"/></td>
                    </tr>
                    <tr>
                        <td>health check port: </td>
                        <td><input id="h_port" type="text"/></td>
                    </tr>
                    <tr>
                        <td>health check timeout: </td>
                        <td><input id="h_timeout" type="text"/></td>
                    </tr>
                    <tr>
                        <td>health check timeout number: </td>
                        <td><input id="h_timeoutNumber" type="text"/></td>
                    </tr>
                    <tr>
                        <td>health check url: </td>
                        <td><input id="h_url" type="text"/></td>
                    </tr>
                    <!--
                    <tr>
                        <td><h3>镜像设置</h3></td>
                    </tr>
                    <tr>
                        <td>镜像名称: </td>
                        <td><input id="imageName" type="text"/></td>
                        <td><button id="testGetImageList">测试获取镜像列表</button></td>
                    <tr>
                        <td>版本号: </td>
                        <td><input id="imageTag" type="text"/></td>
                        <td><button id="testGetTagList">测试获取版本列表</button></td>
                    </tr>
                    </tr>
                    <tr>
                        <td>环境变量设置: </td>
                    </tr>
                    <tr>
                        <td style="color: #2e6da4">环境变量名: </td>
                        <td><input id="envKey" type="text"/></td>
                    </tr>
                    <tr>
                        <td style="color: #2e6da4">环境变量值: </td>
                        <td><input id="envValue" type="text"/></td>
                    </tr>
                    <tr>
                        <td style="color: #2e6da4">环境变量描述: </td>
                        <td><input id="envDescription" type="text"/></td>>
                    </tr>
                    <tr>
                        <td><button id="addEnv">增加环境变量</button>        <button id="delEnv">删除环境变量</button></td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <table id="envList"><tbody></tbody></table>
                        </td>
                    </tr>
                    <tr>
                        <td><button id="addImageRow">确认增加镜像设置</button>        <button id="delImageRow">删除最后一个镜像</button></td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <table id="imageSet"><tbody></tbody></table>
                        </td>
                    </tr>
                    <tr>
                        <td><h3>容器设置</h3></td>
                    </tr>
                    <tr>
                        <td>CPU(个): </td>
                        <td><input id="cpu" type="text"/></td>
                    </tr>
                    <tr>
                        <td>内存(MB): </td>
                        <td><input id="memory" type="text"/></td>
                    </tr>
                    <tr>
                        <td>实例个数: </td>
                        <td><input id="instance" type="text"/></td>
                    </tr>
                    <tr>
                        <td><h3>部署节点</h3></td>
                    </tr>
                    <tr>
                        <td>集群: </td>
                        <td><input id="cluster" type="text"/></td>
                        <td><button id="testGetClusterList">测试获取集群列表</button></td>
                    </tr>
                    <tr>
                        <td>namespace: </td>
                        <td><input id="namespace" type="text"/></td>
                        <td><button id="testGetNamespaceList">测试获取命名空间列表</button></td>
                        <td><button id="testCreateNamespaceList">测试新建命名空间</button></td>
                    </tr>
                    <tr>
                        <td>部署环境: </td>
                        <td><input name="deployLabel" type="radio" value="ONLINE" checked="true"/>生产环境</td>
                        <td><input name="deployLabel" type="radio" value="TEST"/>测试环境</td>
                    </tr>
                    <tr>
                        <td>主机标签,多个以逗号分隔: </td>
                        <td><input id="hostLabels" type="text"/></td>
                        <td><button id="testGetHostLabelList">测试获取主机标签列表</button></td>
                        <td><button id="testFilterHostLabelList">测试筛选主机列表</button></td>
                    </tr>
                    <tr>
                        <td><h3>日志设置</h3></td>
                    </tr>
                    <tr>
                        <td>日志路径: </td>
                        <td><input id="logPath" type="text"/></td>
                    </tr>
                    <tr>
                        <td>使用日志自动收集: </td>
                        <td><input name="autoLogCollection" type="radio" value="true" checked="true"/>使用</td>
                        <td><input name="autoLogCollection" type="radio" value="false"/>不使用</td>
                    </tr>
                    <tr>
                        <td><h3>健康检查</h3></td>
                    </tr>
                    <tr>
                        <td>检查类型: </td>
                        <td><input name="healthCheck" type="radio" value="NONE" checked="true"/>不检查</td>
                        <td><input name="healthCheck" type="radio" value="PROCESS"/>进程检查</td>
                        <td><input name="healthCheck" type="radio" value="TCP"/>TCP检查</td>
                        <td><input name="healthCheck" type="radio" value="HTTP"/>HTTP检查</td>
                    </tr>
                    <tr>
                        <td>检测端口: </td>
                        <td><input id="healthCheckPort" type="text" readonly=true/></td>
                    </tr>
                    <tr>
                        <td>超时时间: </td>
                        <td><input id="healthCheckTimeout" type="text" readonly=true/></td>
                    </tr>
                    <tr>
                        <td>超时次数: </td>
                        <td><input id="healthCheckTimeoutNumber" type="text" readonly=true/></td>
                    </tr>
                    <tr>
                        <td>检测url: </td>
                        <td><input id="healthCheckUrl" type="text" readonly=true/></td>
                    </tr>
                    <tr>
                        <td><h3>负载均衡</h3></td>
                    </tr>
                    <tr>
                        <td>使用负载均衡: </td>
                        <td><input name="loadBalance" type="radio" value="NORMAL"/>使用</td>
                        <td><input name="loadBalance" type="radio" value="NONE" checked="true"/>不使用</td>
                    </tr>
                    <tr>
                        <td>对外访问域名: </td>
                        <td><input id="visitUrl" type="text"/></td>
                        <td><button id="testGetVisitUrl">测试获取对外访问域名</button></td>
                    </tr>
                    <tr>
                        <td>对外访问端口: </td>
                        <td><input id="visitPort" type="text"/></td>
                    </tr>
                    <tr>
                        <td>对外访问IP，可多个，使用逗号分隔: </td>
                        <td><input id="visitIps" type="text" style="width: 200%;"/></td>
                    </tr>
                    -->
                    <tr>
                        <td><button id="createDeploy">创建</button></td>
                    </tr>
                    <tr>
                        <td>deployId: </td>
                        <td><input id="start_deployId" type="text"/></td>
                    </tr>
                    <tr>
                        <td>version: </td>
                        <td><input id="start_version" type="text"/></td>
                    </tr>
                    <tr>
                        <td><button id="startDeploy">启动</button></td>
                    </tr>
                </table>
            </div>
            <div class="tag" style="display:none">
                <table>
                    <tr>
                        <td><button id="listDeploy">部署列表</button></td>
                    </tr>
                    <tr>
                        <td>回滚 deployId: </td>
                        <td><input id="rollback_deployId" type="text"/></td>
                    </tr>
                    <tr>
                        <td>回滚 version: </td>
                        <td><input id="rollback_versionId" type="text"/></td>
                    </tr>
                    <tr>
                        <td><button id="rollback">回滚</button></td>
                    </tr>
                    <tr>
                        <td>扩容 deployId: </td>
                        <td><input id="scaleup_deployId" type="text"></td>
                    </tr>
                    <tr>
                        <td>扩容 replicas: </td>
                        <td><input id="scaleup_replicas" type="text"></td>
                    </tr>
                    <tr>
                        <td><button id="scaleup">扩容</button></td>
                    </tr>
                    <tr>
                        <td>缩容 deployId: </td>
                        <td><input id="scaledown_deployId" type="text"></td>
                    </tr>
                    <tr>
                        <td>缩容 replicas: </td>
                        <td><input id="scaledown_replicas" type="text"></td>
                    </tr>
                    <tr>
                        <td><button id="scaledown">缩容</button></td>
                    </tr>
                    <tr><td colspan="2">----------------openxxs is handsome----------------</td></tr>
                    <tr>
                        <td>deployId: </td>
                        <td><input id="create_version_deployId" type="text"/></td>
                    </tr>
                    </tr>
                    <td style="color: #9575cd">image: </td>
                    <td><input id="cc_image" type="text" value="centos"/></td>
                    </tr>
                    <tr>
                        <td style="color: #9575cd">tag: </td>
                        <td><input id="cc_tag" type="text" value="7"/></td>
                    </tr>
                    <tr>
                        <td style="color: #9575cd">cpu: </td>
                        <td><input id="cc_cpu" type="text" value="1"/></td>
                    </tr>
                    <tr>
                        <td style="color: #9575cd">memory: </td>
                        <td><input id="cc_mem" type="text" value="100"/></td>
                    </tr>
                    <tr>
                        <td style="color: #9575cd">env key: </td>
                        <td><input id="ce_key" type="text" value="JAVA"/></td>
                    </tr>
                    <tr>
                        <td style="color: #9575cd">env value: </td>
                        <td><input id="ce_value" type="text" value="/usr/java"/></td>
                    </tr>
                    <tr>
                        <td style="color: #9575cd">env description: </td>
                        <td><input id="ce_description" type="text" value="java path"/></td>
                    </tr>
                    <tr>
                    <tr>
                        <td><button id="caddEnv">增加环境变量</button></td>
                        <td><button id="cdelEnv">删除环境变量</button></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <table id="cenvList"><tbody></tbody></table>
                        </td>
                    <tr>
                        <td><button id="caddContainer">增加容器</button></td>
                        <td><button id="cdelContainer">删除容器</button></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <table id="ccontainerList"><tbody></tbody></table>
                        </td>
                    </tr>
                    <tr>
                        <td style="color: #4062eb">log path: </td>
                        <td><input id="clogPath" type="text" value="/opt/log"/></td>
                    </tr>
                    <tr>
                        <td style="color: #4062eb">autoCollect (true or false): </td>
                        <td><input id="cautoCollect" type="text" value="true"/></td>
                    </tr>
                    <tr>
                        <td style="color: #4062eb">logTopic: </td>
                        <td><input id="clogTopic" type="text" value="test_topic"/></td>
                    </tr>
                    <tr>
                        <td><button id="caddLog">增加日志路径</button></td>
                        <td><button id="cdelLog">删除日志路径</button></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <table id="clogList"></table>
                        </td>
                    <tr>
                    <tr>
                        <td style="color: #6ac5b6">label name: </td>
                        <td><input id="cl_name" type="text" value="hostname"/></td>
                    </tr>
                    <tr>
                        <td style="color: #6ac5b6">label content: </td>
                        <td><input id="cl_content" type="text" value="bx-42-197"/></td>
                    </tr>
                    <tr>
                        <td><button id="caddLabel">增加标签</button></td>
                        <td><button id="cdelLabel">删除标签</button></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <table id="clabelList"></table>
                        </td>
                    <tr>
                    <tr>
                        <td>升级: <button id="createVersion">新建version</button> ---> <button id="startUpdate">启动升级</button> </td>
                    </tr>
                </table>
            </div>
            <div class="tag" style="display:none">
                <table>
                    <tr>
                        <td>获取 deployId: </td>
                        <td><input id="getDeployDetail_deployId" type="text"/></td>
                        <td><button id="getDeployDetail">获取部署详情</button></td>
                    </tr>
                </table>
            </div>
            <div class="tag" style="display:none">
                <table>
                    <tr>
                        <td>停止 deployId: </td>
                        <td><input id="stop_deployId" type="text"/></td>
                        <td><button id="stopDeploy">停止部署</button></td>
                    </tr>
                    <tr>
                        <td>删除 deployId: </td>
                        <td><input id="delete_deployId" type="text"/></td>
                        <td><button id="deleteDeploy">删除部署</button></td>
                    </tr>
                    <tr>
                        <td>测试监控: </td>
                        <td><button id="monitor">测试</button></td>
                        <td><a href="http://localhost:8081/chart/big?id=368114&domeosid=17" target="_blank">跳转监控页面</a></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <script type="application/javascript">

        var containerDrafts = new Array();
        var envList = new Array();
        var logList = new Array();
        var labelList = new Array();

        $(function () {
            $('#addLabel').bind('click', function(event) {
                var l_name = $('#l_name').val();
                var l_content = $('#l_content').val();
                var label = {
                    name: l_name,
                    content: l_content
                };
                for (var key in label) {
                    if (label[key] == null || label[key] == "") {
                        delete label[key];
                    }
                }
                if (label != null && label != []) {
                    labelList.push(label);
                    var tb = document.getElementById("labelList");
                    var row = tb.insertRow();
                    var cell = row.insertCell();
                    cell.innerHTML = "name: " + $('#l_name').val()
                            + "    content: " + $('#l_content').val();
                }
            });
        });

        $(function () {
            $('#addLog').bind('click', function(event) {
                var logPath = $('#logPath').val();
                var autoCollect = $('#autoCollect').val();
                var logTopic = $('#logTopic').val();
                var log = {
                    logPath: logPath,
                    autoCollect: autoCollect,
                    logTopic: logTopic
                };
                for (var key in log) {
                    if (log[key] == null || log[key] == "") {
                        delete log[key];
                    }
                }
                if (log != null && log != []) {
                    logList.push(log);
                    var tb = document.getElementById("logList");
                    var row = tb.insertRow();
                    var cell = row.insertCell();
                    cell.innerHTML = "logPath: " + $('#logPath').val()
                            + "    autoCollect: " + $('#autoCollect').val()
                            + "    logTopic: " + $('#logTopic').val();
                }
            });
        });

        $(function () {
            $('#addEnv').bind('click', function(event) {
                var e_key = $('#e_key').val();
                var e_value = $('#e_value').val();
                var e_description = $('#e_description').val();
                var envDraft = {
                    key: e_key,
                    value: e_value,
                    description: e_description
                };
                for (var key in envDraft) {
                    if (envDraft[key] == null || envDraft[key] == "") {
                        delete envDraft[key];
                    }
                }
                if (envDraft != null && envDraft != []) {
                    envList.push(envDraft);
                    var tb = document.getElementById("envList");
                    var row = tb.insertRow();
                    var cell = row.insertCell();
                    cell.innerHTML = "key: " + $('#e_key').val()
                            + "    value: " + $('#e_value').val()
                            + "    description: " + $('#e_description').val();
                }
            });
        });

        $(function () {
            $('#addContainer').bind('click', function(event) {
                var c_image = $('#c_image').val();
                var c_tag = $('#c_tag').val();
                var c_cpu = $('#c_cpu').val();
                var c_mem = $('#c_mem').val();
                var containerDraft = {
                    image: c_image,
                    tag: c_tag,
                    cpu: c_cpu,
                    mem: c_mem,
                    envs: envList
                };
                for (var key in containerDraft) {
                    if (containerDraft[key] == null || containerDraft[key] == "" || containerDraft[key] == []) {
                        delete containerDraft[key];
                    }
                }
                if (containerDraft != null && containerDraft != []) {
                    containerDrafts.push(containerDraft);
                    var tb = document.getElementById("containerList");
                    var row = tb.insertRow();
                    var cell = row.insertCell();
                    cell.innerHTML = "image: " + $('#c_image').val()
                            + "    tag: " + $('#c_tag').val()
                            + "    cpu: " + $('#c_cpu').val()
                            + "    memory: " + $('#c_mem').val() + "    envs: ";
                    for (var env in envList) {
                        cell.innerHTML = cell.innerHTML +
                                envList[env]["key"] + "    " + envList[env]["value"] + "    " + envList[env]["description"] + ";    ";
                    }
                }
            });
        });

        $(function () {
            $('#delLabel').bind('click', function(event) {
                var tb = document.getElementById("labelList");
                tb.deleteRow(tb.rows.length - 1);
                labelList.pop();
            });
        });

        $(function () {
            $('#delLog').bind('click', function(event) {
                var tb = document.getElementById("logList");
                tb.deleteRow(tb.rows.length - 1);
                logList.pop();
            });
        });

        $(function () {
            $('#delEnv').bind('click', function(event) {
                var tb = document.getElementById("envList");
                tb.deleteRow(tb.rows.length - 1);
                envList.pop();
            });
        });

        $(function () {
            $('#delContainer').bind('click', function(event) {
                var tb = document.getElementById("containerList");
                tb.deleteRow(tb.rows.length - 1);
                containerDrafts.pop();
            });
        });

        $(function () {
            $('#getGetImageList').bind('click', function(event) {
                $.ajax({
                    type: 'get',
                    url: 'api/deploy/imagelist',
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json'
                });
            });
        });

        $(function() {
            $('#startDeploy').bind('click', function(event) {
                $.ajax({
                    type: 'post',
                    url: "/api/deploy/action/start?deployId=" + $('#start_deployId').val() + "&version=" + $('#start_version').val(),
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json'
                });
            });
        });

        $(function() {
            $('#stopDeploy').bind('click', function(event) {
                $.ajax({
                    type: 'post',
                    url: "/api/deploy/action/stop?deployId=" + $('#stop_deployId').val(),
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json'
                });
            });
        });

        $(function() {
            $('#deleteDeploy').bind('click', function(event) {
                $.ajax({
                    type: 'delete',
                    url: "/api/deploy/id/" + $('#delete_deployId').val(),
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json'
                });
            });
        });

        $(function() {
            $('#monitor').bind('click', function(event) {
                var container1 = {};
                container1["hostname"] = "bx-42-198";
                container1["containerId"] = "50247d94fec40e5cad18b6a3e12d5ddd616c79f78e3848629bf89b72a3c3d213";
                var container2 = {};
                container2["hostname"] = "bx-42-197";
                container2["containerId"] = "3ba8cef8c021a823f4397c15158ba305cadbb1d8943dea53143c317f92d502e8";
                var container3 = {};
                container3["hostname"] = "bx-42-197";
                container3["containerId"] = "bdda94dbac3730083a7221795668b1cfa470e9d40c368ab61e1ec8c3bea3676f";
                var containers1 = [];
                var containers2 = [];
                var containers3 = [];
                containers1.push(container1);
                containers2.push(container2);
                containers3.push(container3);
                var pod1 = {};
                pod1["podName"] = "domeos-1225test001-version4-cd5oc";
                pod1["containers"] = containers1;
                var pod2 = {};
                pod2["podName"] = "domeos-1225test001-version4-rmykn";
                pod2["containers"] = containers2;
                var pod3 = {};
                pod3["podName"] = "domeos-1225test001-version4-snlex";
                pod3["containers"] = containers3;
                var data = [];
                data.push(pod1);
                data.push(pod2);
                data.push(pod3);
                /*
                var data = [];
                data.push(container1);
                data.push(container2);
                data.push(container3);
                */
                //var counters = ["container.memory.usage", "container.cpu.usage.total"];
                var counters = ["container.memory.usage"];
                var mydata = {
                    "type": "pod",
                    "data": JSON.stringify(data),
                    "counters": JSON.stringify(counters),
                    "graph_type": "h",
                    "_r": Math.random()
                };
                $.ajax({
                    type: 'POST',
                    url: "http://localhost:8081/chart",
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    data: JSON.stringify(mydata)
                });
            });
        });

        $(function() {
            $('#listDeploy').bind('click', function(event) {
                $.ajax({
                    type: 'get',
                    url: "/api/deploy/list",
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json'
                });
            });
        });

        $(function() {
            $('#rollback').bind('click', function(event) {
                $.ajax({
                    type: 'post',
                    url: "/api/deploy/rollback/" + $('#rollback_deployId').val() + "?versionId=" + $('#rollback_versionId').val(),
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json'
                });
            });
        });

        $(function() {
            $('#scaleup').bind('click', function(event) {
                $.ajax({
                    type: 'post',
                    url: ""
                    // TODO
                });
            });
        });

        $(function() {
            $('#getDeployDetail').bind('click', function(event) {
                $.ajax({
                    type: 'get',
                    url: "/api/deploy/id/" + $('#getDeployDetail_deployId').val(),
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json'
                });
            });
        });

        var ccontainerDrafts = new Array();
        var cenvList = new Array();
        var clogList = new Array();
        var clabelList = new Array();

        $(function () {
            $('#caddLabel').bind('click', function(event) {
                var l_name = $('#cl_name').val();
                var l_content = $('#cl_content').val();
                var label = {
                    name: l_name,
                    content: l_content
                };
                for (var key in label) {
                    if (label[key] == null || label[key] == "") {
                        delete label[key];
                    }
                }
                if (label != null && label != []) {
                    clabelList.push(label);
                    var tb = document.getElementById("clabelList");
                    var row = tb.insertRow();
                    var cell = row.insertCell();
                    cell.innerHTML = "name: " + $('#cl_name').val()
                            + "    content: " + $('#cl_content').val();
                }
            });
        });

        $(function () {
            $('#caddLog').bind('click', function(event) {
                var logPath = $('#clogPath').val();
                var autoCollect = $('#cautoCollect').val();
                var logTopic = $('#clogTopic').val();
                var log = {
                    logPath: logPath,
                    autoCollect: autoCollect,
                    logTopic: logTopic
                };
                for (var key in log) {
                    if (log[key] == null || log[key] == "") {
                        delete log[key];
                    }
                }
                if (log != null && log != []) {
                    clogList.push(log);
                    var tb = document.getElementById("clogList");
                    var row = tb.insertRow();
                    var cell = row.insertCell();
                    cell.innerHTML = "logPath: " + $('#clogPath').val()
                            + "    autoCollect: " + $('#cautoCollect').val()
                            + "    logTopic: " + $('#clogTopic').val();
                }
            });
        });

        $(function () {
            $('#caddEnv').bind('click', function(event) {
                var e_key = $('#ce_key').val();
                var e_value = $('#ce_value').val();
                var e_description = $('#ce_description').val();
                var envDraft = {
                    key: e_key,
                    value: e_value,
                    description: e_description
                };
                for (var key in envDraft) {
                    if (envDraft[key] == null || envDraft[key] == "") {
                        delete envDraft[key];
                    }
                }
                if (envDraft != null && envDraft != []) {
                    cenvList.push(envDraft);
                    var tb = document.getElementById("cenvList");
                    var row = tb.insertRow();
                    var cell = row.insertCell();
                    cell.innerHTML = "key: " + $('#ce_key').val()
                            + "    value: " + $('#ce_value').val()
                            + "    description: " + $('#ce_description').val();
                }
            });
        });

        $(function () {
            $('#caddContainer').bind('click', function(event) {
                var c_image = $('#cc_image').val();
                var c_tag = $('#cc_tag').val();
                var c_cpu = $('#cc_cpu').val();
                var c_mem = $('#cc_mem').val();
                var containerDraft = {
                    image: c_image,
                    tag: c_tag,
                    cpu: c_cpu,
                    mem: c_mem,
                    envs: cenvList
                };
                for (var key in containerDraft) {
                    if (containerDraft[key] == null || containerDraft[key] == "" || containerDraft[key] == []) {
                        delete containerDraft[key];
                    }
                }
                if (containerDraft != null && containerDraft != []) {
                    ccontainerDrafts.push(containerDraft);
                    var tb = document.getElementById("ccontainerList");
                    var row = tb.insertRow();
                    var cell = row.insertCell();
                    cell.innerHTML = "image: " + $('#cc_image').val()
                            + "    tag: " + $('#cc_tag').val()
                            + "    cpu: " + $('#cc_cpu').val()
                            + "    memory: " + $('#cc_mem').val() + "    envs: ";
                    for (var env in cenvList) {
                        cell.innerHTML = cell.innerHTML +
                                cenvList[env]["key"] + "    " + cenvList[env]["value"] + "    " + cenvList[env]["description"] + ";    ";
                    }
                }
            });
        });

        $(function () {
            $('#cdelLabel').bind('click', function(event) {
                var tb = document.getElementById("clabelList");
                tb.deleteRow(tb.rows.length - 1);
                clabelList.pop();
            });
        });

        $(function () {
            $('#cdelLog').bind('click', function(event) {
                var tb = document.getElementById("clogList");
                tb.deleteRow(tb.rows.length - 1);
                clogList.pop();
            });
        });

        $(function () {
            $('#cdelEnv').bind('click', function(event) {
                var tb = document.getElementById("cenvList");
                tb.deleteRow(tb.rows.length - 1);
                cenvList.pop();
            });
        });

        $(function () {
            $('#cdelContainer').bind('click', function(event) {
                var tb = document.getElementById("ccontainerList");
                tb.deleteRow(tb.rows.length - 1);
                ccontainerDrafts.pop();
            });
        });

        var newVersionId;

        $(function() {
            $('#createVersion').bind('click', function(event) {
                var deployment = {
                    deployId: $('#create_version_deployId').val(),
                    containerDrafts: ccontainerDrafts,
                    logDrafts: clogList,
                    labelSelectors: clabelList,
                };
                for (var key in deployment) {
                    if (deployment[key] == null || deployment[key] == "") {
                        delete deployment[key];
                    }
                }
                $.ajax({
                    type: 'post',
                    url: "/api/version/create?deployId=" + $('#create_version_deployId').val(),
                    data: JSON.stringify(deployment),
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    success: function(msg) {
                        newVersionId = msg["result"];
                    }
                });
            });
        });

        $(function () {
            $('#startUpdate').bind('click', function(event) {
                $.ajax({
                    type: 'post',
                    url: "/api/deploy/action/update?deployId=" + $('#create_version_deployId').val() + "&version=" + newVersionId,
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json'
                });
            });
        });

        $(function() {
            $('#createDeploy').bind('click', function(event) {
                var deployName = $('#deployName').val();
                var createTime = Math.round(new Date().getTime()/1000);
                var creatorType = $('#creatorType option:selected').val();
                var creatorId = $('#creatorId').val();
                var cluster_namespace = $('#cluster_namespace').val();
                var replicas = $('#replicas').val();
                var clusterName = $('#clusterName').val();
                var hostEnv = $('#hostEnv option:selected').val();
                var l_port = $('#l_port').val();
                var l_targetPort = $('#l_targetPort').val();
                var h_type = $('#h_type').val();
                var h_port = $('#h_port').val();
                var h_timeout = $('#h_timeout').val();
                var h_timeoutNumber = $('#h_timeoutNumber').val();
                var h_url = $('#h_url').val();
                var deployment = {
                    deployName: deployName,
                    createTime: createTime,
                    creator: {
                        creatorType: creatorType,
                        creatorId: creatorId
                    },
                    namespace: cluster_namespace,
                    containerDrafts: containerDrafts,
                    replicas: replicas,
                    clusterName: clusterName,
                    hostEnv: hostEnv,
                    logDrafts: logList,
                    labelSelectors: labelList,
                    loadBalanceDraft: {
                        port: l_port,
                        targetPort: l_targetPort
                    },
                    healthChecker: {
                        type: h_type,
                        port: h_port,
                        timeout: h_timeout,
                        timeoutNumber: h_timeoutNumber,
                        url: h_url
                    }
                };
                for (var key in deployment) {
                    if (deployment[key] == null || deployment[key] == "") {
                        delete deployment[key];
                    }
                }
                if (creatorId == null || creatorId == "") {
                    delete deployment["creator"];
                }
                /*
                 for (var key in deployment["loadBalancerDraft"]) {
                 if (deployment["loadBalancerDraft"][key] == null  || deployment["loadBalancerDraft"][key] == "") {
                 delete deployment["loadBalancerDraft"][key];
                 }
                 }
                 if (deployment["loadBalancerDraft"] == null  || deployment["loadBalancerDraft"]) {
                 delete deployment["loadBalancerDraft"];
                 }
                 for (var key in deployment["healthChecker"]) {
                 if (deployment["healthChecker"][key] == null  || deployment["healthChecker"][key] == "") {
                 delete deployment["healthChecker"][key];
                 }
                 }
                 if (deployment["healthChecker"] == null  || deployment["healthChecker"]) {
                 delete deployment["healthChecker"];
                 }
                 */
                alert(JSON.stringify(deployment));
                $.ajax({
                    type: 'post',
                    url: '/api/deploy/create',
                    data: JSON.stringify(deployment),
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    success: function() {
                        alert('receive success');
                    },
                    error: function() {
                        alert('receive error');
                    }
                });
            });
            $('input[name="healthCheck"]').bind('click', function (event) {
                if ($('input:radio[name="healthCheck"]:checked').val() == "TCP") {
                    $('#healthCheckPort').attr("readonly", false);
                    $('#healthCheckTimeout').attr("readonly", false);
                    $('#healthCheckTimeoutNumber').attr("readonly", false);
                    $('#healthCheckUrl').attr("readonly", true);
                } else if ($('input:radio[name="healthCheck"]:checked').val() == "HTTP") {
                    $('#healthCheckPort').attr("readonly", false);
                    $('#healthCheckTimeout').attr("readonly", false);
                    $('#healthCheckTimeoutNumber').attr("readonly", false);
                    $('#healthCheckUrl').attr("readonly", false);
                } else {
                    $('#healthCheckPort').attr("readonly", true);
                    $('#healthCheckTimeout').attr("readonly", true);
                    $('#healthCheckTimeoutNumber').attr("readonly", true);
                    $('#healthCheckUrl').attr("readonly", true);
                }
            });
        });
    </script>

    <script>
        var tabs = function() {
            function tag(name, elem) {
                return (elem || document).getElementsByTagName(name);
            }
            function id(name) {
                return document.getElementById(name);
            }
            function first(elem) {
                elem = elem.firstChild;
                return elem && elem.nodeType == 1 ? elem : next(elem);
            }
            function next(elem) {
                do {
                    elem = elem.nextSibling;
                } while(elem && elem.nodeType != 1)
                return elem;
            }
            return {
                set:function(elemId, tabId) {
                    var elem = tag("li", id(elemId));
                    var tabs = tag("div", id(tabId));
                    var listNum = elem.length;
                    var tabNum  = tabs.length;
                    for(var i=0; i<listNum; i++) {
                        elem[i].onclick = (function(i) {
                            return function() {
                                for(var j=0; j<tabNum; j++) {
                                    if(i==j) {
                                        tabs[j].style.display = "block";
                                        elem[j].firstChild.className = "selected";
                                    }
                                    else {
                                        tabs[j].style.display = "none";
                                        elem[j].firstChild.className = "";
                                    }
                                }
                            }
                        })(i)
                    }
                }
            }
        }();
        tabs.set("nav", "menu_con");
    </script>
</body>
</html>
